<template>
    <div>
        <div class="container">
            <el-row>
                <el-col :span="24" class="choose-container">
                    <el-form ref="form" label-width="5%">
                        <el-col :span="6">
                            <el-form-item label="">
                                <el-tag type="info">报表>调度模块-出站记录明细报表</el-tag>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <button class="check-btn rf" @click=""><img
                            src="../../assets/imgs/operation_btn_icon_daochu_default.png" alt="" class="btn-img">
                        导出
                    </button>
                    <button class="check-btn rf" @click=""><img
                            src="../../assets/imgs/operation_btn_icon_dayin_default.png" alt="" class="btn-img">
                        直接打印
                    </button>
                    <button class="check-btn rf" @click=""><img
                            src="../../assets/imgs/operation_btn_icon_xin_default.png"  alt="" class="btn-img">
                        新窗口
                    </button>
                    <button class="check-btn rf" @click="QueryData"><img
                            src="../../assets/imgs/operation_btn_icon_chaxun_default.png"  alt="" class="btn-img">
                        查询
                    </button>
                </el-col>
            </el-row>
            <!--分割线-->
            <hr/>

            <!--条件栏-->
            <el-form :inline="true" :model="formList" class="ticketForm" id="ticketingDetail">
                <el-form-item label="操作时间起">
                    <el-date-picker type="datetime" size="mini" class="minipt"
                                    v-model="formList.startDate" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
                <el-form-item label="止">
                    <el-date-picker type="datetime" size="mini" class="minipt" v-model="formList.endDate"
                                    value-format="yyyy-MM-dd HH:mm:ss">

                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <button class="btn rf" @click="GetDate" type="button"><img
                            src="../../assets/imgs/operation_bg_sousuo_default.png" alt="" class="btn-img">
                    </button>
                </el-form-item>


            </el-form>


            <!--报表显示栏-->

            <el-row>
                <el-col>
                    <iframe id="rpIfr" name="rpIfr"
                            style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;width: 100%;height: 100%"
                            frameborder='0' scrolling='auto'>
                    </iframe>
                    <iframe id='savIfr' name="savIfr"
                            style="display: none; width: 100%; height: 100%;" frameborder='0'
                            scrolling='no'></iframe>
                    <iframe id='savExcelIfr' name="savExcelIfr"
                            style="display: none; width: 100%; height: 100%;" frameborder='0'
                            src="../../assets/imgs/operation_bg_biaoti_default.png"
                            scrolling='no'></iframe>
                </el-col>
            </el-row>


            <template>
                <div v-html="Report" class="Report"></div>
            </template>

        </div>


        <!--遮罩层-->
        <div class='popContainer' v-show="modelShow"></div>
        <!--弹窗页面部分-->
        <div class="management-modal-win" v-show="modelShow">
            <!-- 标题 -->
            <el-row>
                <el-col :span="24">
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf modal-img">
                    <div class="lf modal-title">{{modalTitle}}</div>
                    <div class="rf close" @click="closeModual()">X</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="msg-win">
                        <!-- 修改弹窗 -->
                        <div>
                            <el-row class="driver-container">
                                <el-col>
                                    <div>
                                        <el-table style="width: 100%" :data="DatetableData" height="290px"
                                                  @row-dblclick="setdata">
                                            <el-table-column type="index" width="20px"></el-table-column>
                                            <el-table-column prop="date_name" label="名称"></el-table-column>
                                            <el-table-column prop="date_start" label="起始日期"></el-table-column>
                                            <el-table-column prop="date_end" label="结束日期"></el-table-column>
                                            <el-table-column prop="beizhu" label="备注"></el-table-column>
                                        </el-table>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <button class="check-btn rf" @click="closemanagementWin"><img
                            src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt=""
                            class="btn-img">取消
                    </button>
                </el-col>
            </el-row>
        </div>


    </div>


</template>

<script>
    import kit from '../../assets/js/kit';
    import FieldRules from '../../FieldRules';
    import qs from "qs";


    export default {
        data() {
            return {


                modelShow: false,
                modalTitle: "",
                reports: [],


                Report: "",

                formList: {
                    startDate: "",
                    endDate: "",
                },


                TicketSellerList: [],

                BusLineList: [],

                StationList: [],

                DriverList: [],

                Bus_CompanyList: [],

                Bus_VehicleList: [],

                DatetableData: [],


            }
        },

        methods: {


            // 加载系统用户列表数据
            loadUserList() {
                this.$http.get("/sys/user/listWithSpell")
                    .then(data => {
                        for (var item of data.data) {
                            this.TicketSellerList.push({
                                value: item.name,
                                id: item.id
                            });
                        }
                        // console.log(this.TicketSellerList);

                    });
            },


            //加载系统线路列表数据
            loadLineList() {
                this.$http.get("/sch/data/line/listWithSpell")
                    .then(data => {
                            // console.log("11a");
                            for (var item of data.data) {
                                this.BusLineList.push({
                                    value: item.name,
                                    id: item.id
                                });
                            }
                        }
                    )
            },

            //加载到站站点列表数据
            loadStationList() {
                this.$http.get("/sch/data/station/listWithSpell")
                    .then(data => {

                            for (var item of data.data) {
                                this.StationList.push({
                                    code: item.code,
                                    id: item.id,
                                    is_stream_line: item.is_stream_line,
                                    name: item.name,
                                    _spfull: item._spfull,
                                    _spshort: item._spshort,
                                })
                            }
                        }
                    )
            },

            //加载营运单位列表数据
            loadBus_CompanyList() {
                this.$http.get("/sch/data/bus_company/listWithSpell")
                    .then(data => {
                            for (var item of data.data) {
                                this.Bus_CompanyList.push({
                                    code: item.code,
                                    id: item.id,
                                    value: item.name,
                                    _spfull: item._spfull,
                                    _spshort: item._spshort,
                                })
                            }
                        }
                    )
            },

            //加载车牌号列表数据
            loadBus_VehicleList() {
                this.$http.get("/sch/data/bus_vehicle/listWithSpell")
                    .then(data => {
                            for (var item of data.data) {
                                this.Bus_VehicleList.push({
                                    id: item.card_no,
                                    value: item.vehi_no,
                                    _spell: item._spell,
                                })
                            }
                        }
                    )
            },

            //加载驾驶员列表数据
            loadDriverList() {
                this.$http.get("/sch/data/driver/listWithSpell")
                    .then(data => {

                            for (var item of data.data) {
                                this.DriverList.push({
                                    id: item.id,
                                    job_cardno: item.job_cardno,
                                    name: item.name,
                                })

                            }
                        }
                    )
            },

            //查询按钮事件
            QueryData() {
                var that = this;
                var rpparajson = encodeURIComponent('[' +
                    '{"text":"操作时间起:","field":"be_oper","op":"dge","value":"' + that.formList.startDate + '","valuename":"' + that.formList.startDate + '"},' +
                    '{"text":"止:","field":"ed_oper","op":"dle","value":"' + that.formList.endDate + '","valuename":"' + that.formList.endDate + '"}]'
                );
                var sqlparajson = encodeURIComponent('{"be_oper":"' + that.formList.startDate + '",' +
                    '"ed_oper":"' + that.formList.endDate + '"}');
                var rpType = encodeURIComponent("调度模块");
                var rpName = encodeURIComponent("出站记录明细报表");


                this.$http.get("/reports", {
                    params: {
                        rpType: rpType,
                        rpName: rpName,
                        protype: '98',
                        rpparajson: rpparajson,
                        sqlparajson: sqlparajson,

                    }
                }).then(data => {
                    this.Report = data.data;

                })

            },

            // 加载报表
            loadReport() {
                let t = this;
                t.$http.post(
                    '/reports?protype=1',
                    qs.stringify({
                        protype: 1
                    })
                ).then(res => {
                    t.reports = res.data
                }).catch(err => {
                    t.$message.error(err && err.message)
                }).finally(() => {
                })
            },


            //获取日期时间按钮事件
            GetDate() {
                this.DatetableData = [];
                this.modelShow = true;
                this.$http
                    .post("/sys/customdatescope/list")
                    .then(data => {
                        for (var item of data.data.list) {
                            this.DatetableData.push({
                                id: item.id,
                                date_name: item.name,
                                date_start: item.start_date,
                                date_end: item.end_date,
                                beizhu: item.remark,
                            })

                        }
                    })


            },

            //选取时间数据填充到时间框
            setdata(row, event) {
                this.formList.startDate = row.date_start;
                this.formList.endDate = row.date_end;
                this.modelShow = false;

            },
            //关闭弹窗
            closeModual() {
                this.modelShow = false;
            },

            //关闭弹窗
            closemanagementWin() {
                this.modelShow = false;
            },


        },

        watch: {},


        mounted() {
            this.loadUserList();
            this.loadLineList();
            this.loadStationList();
            this.loadBus_CompanyList();
            this.loadBus_VehicleList();
            this.loadDriverList();
            this.loadReport();
        },
    }
</script>

<style scoped>
    .rf {
        float: right;
    }

    .btn {
        width: 25px;
        height: 25px;
        line-height: 28px;
        background: white;
        border-radius: 5px;
        border: 0px;
        color: dodgerblue;
        cursor: pointer;
        margin-left: 6px;
        margin-top: 7px;
        margin-right: 10px;
    }

    .popContainer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1;
    }

    .management-modal-win {
        width: 800px;
        height: 400px;
        position: fixed;
        border-radius: 5px;
        border: 1px solid #E4F0EF;
        border-top: 5px solid #00786D;
        top: 255px;
        left: 55%;
        margin-left: -500px;
        background: white;
        z-index: 99;
        padding: 20px;
        box-shadow: 0 0 1px 1px #C2C7D0;
    }

    .modal-title {
        font-size: 18px;
        padding-left: 10px;
        color: #009688;
        font-weight: bold;
    }

    .close {
        cursor: pointer;
    }

    .msg-win {
        margin-top: 15px;
        width: 770px;
        height: 280px;
        border: 1px solid #E3E4E7;
        padding: 10px;
    }

    .driver-container {
        position: relative;
    }

    .Report {
        overflow-x: scroll;

    }
</style>